<template>
    <div class="ele-body">
        <el-card shadow="never">
            <!-- 搜索表单 -->
            <log-search @search="reload"/>
            <!-- 数据表格 -->
            <ele-pro-table
                    ref="table"
                    :columns="columns"
                    :datasource="datasource"
                    :selection.sync="selection"
            >
                <!-- 表头工具栏 -->
                <template v-slot:toolbar>

                    <el-button
                            size="small"
                            type="danger"
                            icon="el-icon-delete"
                            class="ele-btn-icon"
                            @click="removeBatch"
                    >
                        删除
                    </el-button>
                    <el-button
                            size="small"
                            type="warning"
                            class="ele-btn-icon"
                            @click="refundBatch"
                    >
                        退款
                    </el-button>
                </template>


                <template v-slot:user="{ row }">
                    <div class="ele-cell" v-if="row.figureAccount">
                        <el-avatar v-if="row.figureAccount.avatar" :src="row.figureAccount.avatar" shape="square"
                                   :size="40"/>
                        <div class="ele-cell-content">
                            <div class="ele-cell-title">{{ row.figureAccount.telphone }}</div>
                        </div>
                    </div>
                    <span v-else>无</span>

                </template>

                <template v-slot:train_mode="{ row }">
                    <el-tag v-if="row.train_mode=='fast'" type="success" effect="plain">入门版</el-tag>
                    <el-tag v-if="row.train_mode=='best'" type="primary" effect="plain">高保真</el-tag>
                    <el-tag v-if="row.train_mode=='xunfei'" type="primary" effect="plain">专业版</el-tag>
                </template>

                <template v-slot:card="{ row }">
                    <span v-if="row.card">{{ row.card }} </span>
                    <span v-else>--</span>
                </template>

                <template v-slot:voice_urls="{ row }">
                    <div v-for="(item, index) in row.voice_urls" :key="index + item">
                        <audio :src="item" controls="controls"></audio>
                    </div>

                </template>

                <template v-slot:current_status="{ row }">
                    <el-tag v-if="row.current_status== ''" type="info">无</el-tag>
                    <el-tag v-if="row.current_status== 'sent'" type="info">已发送</el-tag>
                    <el-tag v-if="row.current_status== 'pending'" type="info">等待中</el-tag>
                    <el-tag v-if="row.current_status== 'processing'">处理中</el-tag>

                    <el-tag v-if="row.current_status== 'completed'" type="success">生成成功</el-tag>
                    <el-tag v-if="row.current_status== 'failed' || row.current_status== 'fail' " type="danger">生成失败
                    </el-tag>
                    <div v-if="row.faild_message " style="margin-top: 5px;font-size: 2px;">
                        失败原因：<span style="font-weight: bold;color: red;">{{row.faild_message}}</span>
                    </div>
                </template>

                <template v-slot:is_status="{ row }">
                    <ele-dot v-if="row.is_status==1" type="warning" effect="plain" text="待审核" :ripple="true"/>
                    <ele-dot v-if="row.is_status==2" type="success" effect="plain" text="审核通过" :ripple="true"/>
                    <ele-dot v-if="row.is_status==3" type="danger" effect="plain" text="审核拒绝" :ripple="true"/>
                    <div v-if="row.is_status==3 && row.fail_msg " style="margin-top: 5px;font-size: 2px;">
                        拒绝原因：<span style="font-weight: bold;color: red;">{{row.fail_msg}}</span>
                    </div>
                </template>

                <!-- 操作列 -->
                <template v-slot:action="{ row }">

                    <el-link
                            v-if="row.is_status==1"
                            type="success"
                            :underline="false"
                            icon="el-icon-circle-check"
                            @click="openCheck(row)"
                    >
                        审核
                    </el-link>


                    <el-popconfirm
                            class="ele-action"
                            title="确定要删除此数据吗？"
                            @confirm="remove(row)"
                    >
                        <template v-slot:reference>
                            <el-link type="danger" :underline="false" icon="el-icon-delete">
                                删除
                            </el-link>
                        </template>
                    </el-popconfirm>
                    <el-popconfirm
                            v-if="(row.current_status == 'fail' ||row.current_status == 'failed') && row.is_refund != 1 && row.train_mode == 'xunfei'"
                            class="ele-action"
                            title="确定要给用户退款吗？"
                            @confirm="refund(row)"
                    >
                        <template v-slot:reference>
                            <el-link type="red" :underline="false"> 退款</el-link>
                        </template>
                    </el-popconfirm>

                </template>
            </ele-pro-table>
        </el-card>
        <check :visible.sync="showCheck" :data="current" @done="reload"/>
    </div>
</template>

<script>

    import LogSearch from './components/log-search';
    import Check from './components/check';
    import {list, remove, modify, sortChange, refund} from '@/api/voiceTwin';
    import Sortable from 'sortablejs';

    export default {
        name: 'VoiceTwin',
        components: {
            LogSearch,
            Check
        },
        data() {
            return {
                // 表格列配置
                columns: [
                    {
                        columnKey: 'selection',
                        type: 'selection',
                        width: 45,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        prop: 'user',
                        label: '开发者',
                        showOverflowTooltip: true,
                        minWidth: 110,
                        slot: 'user'
                    },
                    {
                        prop: 'name',
                        label: '名称',
                        showOverflowTooltip: true,
                        minWidth: 90,
                    },

                    {
                        prop: 'train_mode',
                        label: '训练模式',
                        align: 'center',
                        showOverflowTooltip: true,
                        minWidth: 90,
                        slot: 'train_mode'
                    },

                    {
                        prop: 'voice_urls',
                        label: '语音链接',
                        align: 'center',
                        showOverflowTooltip: true,
                        minWidth: 180,
                        slot: 'voice_urls'
                    },

                    {
                        prop: 'card',
                        label: '卡密',
                        align: 'center',
                        showOverflowTooltip: true,
                        minWidth: 90,
                        slot: 'card'
                    },
                    {
                        prop: 'current_status',
                        label: '状态',
                        align: 'center',
                        showOverflowTooltip: true,
                        minWidth: 90,
                        slot: 'current_status'
                    },
                    {
                        prop: 'is_status',
                        label: '审核状态',
                        align: 'center',
                        width: 110,
                        resizable: false,
                        slot: 'is_status',
                        showOverflowTooltip: true
                    },

                    {
                        prop: 'create_time',
                        label: '创建时间',
                        align: 'center',
                        showOverflowTooltip: true,
                        minWidth: 100,
                    },
                    {
                        columnKey: 'action',
                        label: '操作',
                        width: 200,
                        align: 'center',
                        resizable: false,
                        slot: 'action',
                        hideInSetting: true,
                        showOverflowTooltip: true
                    }
                ],
                // 表格选中数据
                selection: [],
                // 当前编辑数据
                current: null,
                // 是否显示编辑弹窗
                showEdit: false,
                // 是否显示审核弹窗
                showCheck: false,
                //弹框名称
                id: 0,
            };
        },
        methods: {
            rowDrop() {
                const tbody = document.querySelector('.el-table__body-wrapper tbody')
                const _this = this
                Sortable.create(tbody, {
                    forceFallback: true,
                    dragClass: 'drag',
                    delay: 100,
                    animation: 1000,
                    onEnd({newIndex, oldIndex}) {
                        console.log(newIndex);
                        console.log(oldIndex);
                        //更换表格数据 后续拖动坐标才会正确
                        let data = _this.$refs.table.getData();

                        let nid = data[newIndex].id;
                        let oid = data[oldIndex].id;

                        console.log(nid);
                        console.log(oid);

                        const currRow = data.splice(oldIndex, 1)[0];
                        data.splice(newIndex, 0, currRow);

                        sortChange(data).then((msg) => {

                        }).catch((e) => {
                            _this.$refs.table.reload();
                        });
                        //去数据库更换排序
                        console.log(_this.$refs.table.getData());
                    }
                })
            },
            /* 表格数据源 */
            datasource({page, limit, where, order}) {
                return list({...where, ...order, page, limit});
            },
            /* 刷新表格 */
            reload(where) {
                this.$refs.table.reload({page: 1, where: where});
            },
            /* 打开编辑弹窗 */
            openEdit(row) {
                this.current = row;
                this.showEdit = true;
            },
            /* 打开编辑弹窗 */
            openCheck(row) {
                this.id = row.id;
                this.current = row;
                this.showCheck = true;
            },
            /* 删除 */
            remove(row) {
                const loading = this.$loading({lock: true});
                remove(row.id).then((msg) => {
                    loading.close();
                    this.$message.success(msg);
                    this.reload();
                })
                    .catch((e) => {
                        loading.close();
                        this.$message.error(e.message);
                    });
            },
            refundBatch() {
                if (!this.selection.length) {
                    this.$message.error('请至少选择一条数据');
                    return;
                }
                this.$confirm('确定要退款选中的数据吗?', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        const loading = this.$loading({lock: true});
                        refund(this.selection.map((d) => d.id))
                            .then((msg) => {
                                loading.close();
                                this.$message.success(msg);
                                this.reload();
                            })
                            .catch((e) => {
                                loading.close();
                                this.$message.error(e.message);
                            });
                    })
                    .catch(() => {
                    });
            },

            refund(row) {
                const loading = this.$loading({lock: true});
                refund(row.id)
                    .then((msg) => {
                        loading.close();
                        this.$message.success(msg);
                        this.reload();
                    })
                    .catch((e) => {
                        loading.close();
                        this.$message.error(e.message);
                    });
            },
            /* 批量删除 */
            removeBatch() {
                if (!this.selection.length) {
                    this.$message.error('请至少选择一条数据');
                    return;
                }
                this.$confirm('确定要删除选中的数据吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    const loading = this.$loading({lock: true});
                    remove(this.selection.map((d) => d.id))
                        .then((msg) => {
                            loading.close();
                            this.$message.success(msg);
                            this.reload();
                        })
                        .catch((e) => {
                            loading.close();
                            this.$message.error(e.message);
                        });
                }).catch(() => {
                });
            },

            /* 更改状态 */
            editStatus(row) {
                const loading = this.$loading({lock: true});
                modify({id: row.id, field: 'is_display', value: row.is_display})
                    .then((msg) => {
                        loading.close();
                        this.$message.success(msg);
                    })
                    .catch((e) => {
                        loading.close();
                        row.status = !row.status ? 1 : 0;
                        this.$message.error(e.message);
                    });
            }
        }, mounted() {
            this.rowDrop()
            //this.columnDrop()
        }
    };
</script>

<style lang="scss" scoped>

    .drag {
        background: #000 !important;
        background-image: linear-gradient(#333, #999) !important;
    }

    .ele-cell-content {

        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

</style>
